<template>
    <div>
      hello world
      <input v-log type="text" placeholder="自动聚焦"></input>
      <div>{{name | nameChange}}</div>
      <div v-change:foo.a = 'message'></div>
      <button @click="add">加一</button>
      <div>
        {{test}}
      </div>
    </div>
</template>

<script>
  import {mapState,mapActions} from 'vuex';
    export default {
        name: "test",
      data(){
          return {
            name: 'xiaoxian',
            message: '123'
          }
      },
      computed: {
        ...mapState({
          test: (state)=>state.test
        })
      },
      filters: {
        nameChange: function (value){
          return [...value].slice(1);
        }
      },
      directives: {
          'log': {
            inserted: function (el) {
              el.focus();
            }
          },
          'change': {
            bind: function (el, binding) {
              el.innerHTML = binding.value;
              console.log(binding.name);
              console.log(binding.expression);
              console.log(binding.modifiers);
            }
          }
      },
      methods:{
        ...mapActions({
          addTest: 'add'
        }),
        add(){
          this.addTest();
        }
      }
    }
</script>

<style scoped>

</style>
